<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file='../share_header.jsp' %>
<div id="content-header">
    <h1>角色管理</h1>
</div>
<%--<div id="breadcrumb">--%>
<%--&lt;%&ndash;<a href="index.html" class="tip-bottom" data-original-title="Go to Home"><i class="icon-home"></i> Home</a>&ndash;%&gt;--%>
<%--<a href="javascript:void(0)"--%>
<%--url="${pageContext.request.contextPath}/crm/getMyselfClientInfo.do"  class="m-pageChange tip-bottom">权限管理</a>--%>
<%--<a href="#" class="current">角色管理</a>--%>
<%--</div>--%>
<div class="container-fluid marginTop20">
    <div class="row-fluid topCircleBorder paddingTop10 paddingBottom10 marginBottom5">
        <div class="span6">
            <div class="formLayOut">
                <div class="field">
                    <label for="roleCodeSearch" class="control-label">角色Code</label>
                    <input class="text" type="text" id="roleCodeSearch">
                </div>
            </div>


            <div style="float: left;margin-left: 28px">
                <button id="searchRoleCode" class="btn btn-primary">查询</button>
            </div>
        </div>
        <div class="offset3 span2" style="margin-left: 245px;">
            <button id="addRoleBtn" class="btn btn-primary addButtonSize rightLayOut"><i class=" icon-plus"></i>添加
            </button>
        </div>
    </div>
    <div class="row-fluid">
        <table id="roleManageTable">
        </table>
    </div>
    <!-- Modal -->
    <div id="roleManageModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">用户角色授权</h3>
        </div>
        <div class="modal-body">
            <div class="formLayOut modifyPadding fontColor">
                <span>角色ID:&nbsp;</span>
                <span class="fireText" id="roleIdDisabled"/>
                <span>&nbsp;&nbsp;</span>
            </div>
            <div class="formLayOut modifyPadding fontColor">
                <span>角色Code:&nbsp;</span>
                <span class="fireText" id="roleCodeDisabled"/>
                <span>&nbsp;&nbsp;</span>
            </div>
            <div class="formLayOut modifyPadding fontColor">
                <span>角色名称:&nbsp;</span>
                <span class="fireText" id="roleNameDisabled"/>
                <span>&nbsp;&nbsp;</span>
            </div>
            <table id="rolePermissionTable">
            </table>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            <button id="roleSaveBtn" type="button" class="btn btn-primary">提交</button>
        </div>
    </div>

    <!-- Modal -->
    <div id="roleModifyModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <form id="modifyRoleForm" action="javascript:roleModifySave()">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="roleModifyModalLabel">角色名称修改</h3>
            </div>
            <div class="modal-body">
                <div class="form-group formLayOut">
                    <div class="field">
                        <label for="roleID" class="control-label">角色ID</label>
                        <input class="text" type="text" name="roleId" id="roleID" readonly/>
                    </div>
                </div>
                <div class="form-group formLayOut">
                    <div class="field">
                        <label for="roleCode" class="control-label">角色Code</label>
                        <input class="text" type="text" name="roleCode" id="roleCode" readonly/>
                    </div>
                </div>
                <div class="form-group formLayOut">
                    <div class="field">
                        <label for="roleName" class="control-label">角色名称</label>
                        <input class="text" type="text" name="roleName" id="roleNewName"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </form>
    </div>

    <!-- Modal -->
    <div id="roleAddModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <form id="addRoleForm" action="javascript:roleAddSave()">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>添加角色</h3>
            </div>
            <div class="modal-body">
                <div class="control-group">
                    <div class="field">
                        <label for="roleCode" class="control-label">角色Code</label>
                        <input type="text" name="roleCode" id="roleCode"/>
                    </div>
                </div>
                <div class="control-group">
                    <div class="field">
                        <label for="roleName" class="control-label">角色名称</label>
                        <input type="text" name="roleName" id="roleName"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </form>
    </div>

</div>
<script src="${pageContext.request.contextPath}/resources/js/permission/roleManage.js"></script>
<script>
    $(function () {
        //页面数据初始化
        gotoPage(1);
        $("#addRoleForm").validate({
            errorElement: 'div',
            errorClass: 'help-inline',
            focusInvalid: false,
            rules: {
                roleCode: {
                    required: true
                },
                roleName: {
                    required: true
                }
            },
            messages: {
                roleCode: {
                    required: "角色Code不能为空"
                },
                roleName: {
                    required: "角色名称不能为空"
                }
            },
            highlight: function (element) {
                $(element).closest('.control-group').addClass('error');
            },
            success: function (label) {
                label.closest('.control-group').removeClass('error');
                label.remove();
            },
            errorPlacement: function (error, element) {
                element.parent('.field').append(error);
            }

        });
        $("#modifyRoleForm").validate({
            errorElement: 'div',
            errorClass: 'help-inline',
            focusInvalid: false,
            rules: {
                roleName: {
                    required: true
                }
            },
            messages: {
                roleCode: {
                    required: "角色Code不能为空"
                }
            },
            highlight: function (element) {
                $(element).closest('.control-group').addClass('error');
            },
            success: function (label) {
                label.closest('.control-group').removeClass('error');
                label.remove();
            },
            errorPlacement: function (error, element) {
                element.parent('.field').append(error);
            }

        });
    });
</script>

